<template>
    <div id="create-edit-container">
        <el-drawer
            direction="rtl"
            :visible.sync="stateManager.editDialogVisible"
            :title="modalTitle"
            custom-class="demo-drawer"
            ref="drawer"
            :before-close="closeDialog">
            <div class="dialog-drawer-content">
                <el-form ref="model" :model="model" :rules="ruleValidate">
                    <el-row type="flex" :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="广告位名称" prop="title">
                                <el-input v-model="model.title" placeholder="请填写广告位名称"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="指向类型" prop="point_type">
                                <el-select v-model="model.point_type" @change="ContentList" style="width: 100%"
                                           placeholder="请选择指向类型">
                                    <el-option
                                        v-for="(item,index) in typeArr"
                                        :key="index"
                                        :label="item"
                                        :value="index">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type="flex" :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="素材标签" prop="tags">
                                <el-select v-model="model.tags"
                                           filterable
                                           multiple
                                           allow-create
                                           style="width: 100%" placeholder="请选择素材标签">
                                    <el-option
                                        v-for="(item,key) in tags"
                                        :key="key"
                                        :label="item.label"
                                        :value="item.label">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="文章栏目" prop="category">
                                <el-cascader :props="{multiple: true,checkStrictly: true,
                        label: 'name',children: 'children',value:'id'}"
                                             :options="categoryList"
                                             style="width: 100%;"
                                             collapse-tags
                                             clearable
                                             placeholder="请选择文章栏目" v-model="model.category"></el-cascader>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type="flex" :gutter="20" v-if="model.point_type === 1">
                        <el-col :span="12">
                            <el-form-item label="栏目标题" prop="point_category_id">
                                <el-cascader :props="{checkStrictly: true,
                        label: 'name',children: 'children',value:'id'}"
                                             :options="categoryList"
                                             @change="ContentList"
                                             style="width: 100%;"
                                             clearable
                                             placeholder="请选择栏目" v-model="model.point_category_id"></el-cascader>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="链接内容" prop="point_content_id">
                                <el-select
                                    v-model="model.point_content_id"
                                    :clearable="true" style="width: 100%;" placeholder="请选择链接内容"
                                >
                                    <el-option
                                        v-for="item in contentSelectList"
                                        :key="item.id"
                                        :label="item.content_detail?item.content_detail.title:''"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type="flex" :gutter="20" v-if="model.point_type === 2">
                        <el-col :span="12">
                            <el-form-item label="栏目标题" prop="point_category_id">
                                <el-cascader :props="{checkStrictly: true,
                        label: 'name',children: 'children',value:'id'}"
                                             :options="categoryList"
                                             style="width: 100%;"
                                             clearable
                                             placeholder="请选择栏目" v-model="model.point_category_id"></el-cascader>

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type="flex" :gutter="20" v-if="model.point_type === 3">
                        <el-col :span="24">
                            <el-form-item label="指向url" prop="point_url">
                                <el-input v-model="model.point_url" placeholder="请输入指向url"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row type="flex" :gutter="20" v-if="model.point_type === 4">
                        <el-col :span="12">
                            <el-form-item label="栏目标题" prop="point_category_id">
                                <el-cascader :props="{checkStrictly: true,
                        label: 'name',children: 'children',value:'id'}"
                                             :options="categoryList"
                                             @change="MediaList"
                                             style="width: 100%;"
                                             clearable
                                             placeholder="请选择栏目" v-model="model.point_category_id"></el-cascader>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="链接视频" prop="point_content_id">
                                <el-select
                                    v-model="model.point_content_id"
                                    :clearable="true" style="width: 100%;" placeholder="请选择链接视频"
                                >
                                    <el-option
                                        v-for="item in contentSelectList"
                                        :key="item.id"
                                        :label="item.content_detail?item.content_detail.title:''"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row type="flex" :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="广告位封面" prop="assets_id">

                            </el-form-item>
                            <div class="image-picker">
                                <div class="el-upload" @click="imgPick">
                                    <img v-if="model.thumbnail_path" :src="model.thumbnail_path" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>

                <div class="dialog-drawer-footer">
                    <el-button type="ghost" @click="closeDialog">取消</el-button>
                    <el-button type="primary" @click="saveModel" :loading="stateManager.buttonLoading">
                        {{stateManager.buttonLoading?'提交中':'确定'}}
                    </el-button>
                </div>
            </div>

        </el-drawer>
        <image-picker :stateManager="manager" :multiple="false" @submitPicture="getPicture"></image-picker>
    </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { getContentsByCategory, getMediaByCategory } from '@/api/cms'
  import imagePicker from '@/components/imagePicker'

  export default {
    props: {
      stateManager: {
        type: Object,
      },
    },
    components: {
      'image-picker': imagePicker,
    },
    data: function () {
      return {
        model: this.$modelDataSource({
          url: '/api/cms/picture',
          dataKey: 'model',
          attributes: {
            id: 0,
            title: '',
            assets_id: null,
            point_url: '',
            point_type: '',
            point_content_id: '',
            point_category_id: '',
            point_category_path: '',
            tags: [],
            category: [],
            thumbnail_path: '',
          },
        }),
        manager: {DialogVisible: false},
        contentSelectList: [],
        typeArr: [
          '无',
          '单页',
          '列表',
          '外链',
          '视频',
        ],
        isLoading: false,
        ruleValidate: {
          title: [
            {required: true, message: '请填写广告位名称', trigger: 'blur'},
          ],
          category: [
            {required: true, message: '请选择文章栏目', trigger: ['blur', 'array']},
          ],
          point_category_id: [
            {required: true, type: 'array', message: '请选择指向栏目', trigger: 'change'},
          ],
          point_content_id: [
            {required: true, type: 'integer', message: '请选择指向内容', trigger: 'change'},
          ],
          point_url: [
            {required: true, message: '请选择指向地址不能为空', trigger: 'blur'},
          ],
        },

      }
    },
    methods: {
      closeDialog: function () {
        if (this.stateManager.buttonLoading) {
          return false
        }
        this.stateManager.editDialogVisible = false
        this.stateManager.listLoading = false
        this.model.reset()
        this.$refs['model'].resetFields()
        this.stateManager.editModelId = 0
      },
      imgPick () {
        this.manager.DialogVisible = true
      },
      getPicture: function (e) {
        this.model.assets_id = e.Listids[0]
        this.model.thumbnail_path = e.listthumbs[0]
      },
      MediaList () {
        this.contentSelectList = []
        if (this.model.point_category_id && this.model.point_type == 4) {
          getMediaByCategory(this.model.point_category_id).then((res) => {
            this.contentSelectList = res.data

          })
          return this.contentSelectList
        }
      },
      ContentList () {
        this.contentSelectList = []
        if (this.model.point_category_id && this.model.point_type == 1) {
          getContentsByCategory(this.model.point_category_id).then((res) => {
            this.contentSelectList = res.data

          })
          return this.contentSelectList
        }
      },
      saveModel: function () {
        let self = this
        self.$refs['model'].validate((valid) => {
          if (valid) {
            if (self.stateManager.editModelId == 0) {
              self.model.parent_id = self.stateManager.parentId
            }
            self.isLoading = false
            self.stateManager.buttonLoading = true
            self.model.save(
              function () {
                self.$message.success('保存成功')
                self.stateManager.refreshList = true
                self.stateManager.buttonLoading = false
                self.closeDialog()
              }, function (errors) {
                self.stateManager.buttonLoading = false
                self.isLoading = false

              })
          }
          else {
            console.log('表单验证失败')
          }
        })
      },
    },
    computed: {
      ...mapGetters([
        'tags',
        'categoryList',
      ]),
      modalTitle () {
        switch (this.stateManager.editModelId) {
          case 0:
            return '添加广告位'
            break
          default:
            return '编辑广告位'
        }
      },
    },
    watch: {
      'stateManager.editModelId': function (newValue) {
        let self = this
        this.model.fetch(newValue, {include: 'update'}, function () {
          self.stateManager.editDialogVisible = true
        }, function () {
          self.stateManager.listLoading = false
        })
      },
      'model.point_type': function (newValue) {
        switch (newValue) {
          case 1:
            this.ContentList()
            break
          case 4:
            this.MediaList()
            break
        }
      },
    },
  }
</script>
